<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<link type="text/css" rel="stylesheet"
	href="/products/passport/v2/css/base.css" />
<link type="text/css" rel="stylesheet"
	href="/products/passport/v2/css/my_acc.css" />
<link type="text/css" rel="stylesheet"
	href="/products/passport/v2/css/register.css" />
<script src="/products/passport/v2/js/detectmobilebrowser.js"></script>
<script src="/products/passport/v2/js/jquery.js"></script>
<script type="text/javascript"
	src="/products/passport/v2/js/kzpassport.js"></script>
<script type="text/javascript"
	src="/products/passport/v2/js/formValidator413.js"></script>
<script type="text/javascript" src="/products/passport/v2/js/kzutils.js"></script>
<style>
.mt30{
	margin-bottom: 30px;
}
</style>

<%@ include file="head.jsp"%>
<body style="min-width: 980px;min-height: 650px;">
	<div id="backCardView">
		<div>
			<div class="t_line mt31"
				style="padding-left: 20%;margin-top: 0;padding-top: 31px;">
				<div class="l_list wone lh130">游戏：</div>
				<div class="r_list wtwo">
					<select id="gameName" style="height:30px;width: 253px;">
						<option value="-1">请选择游戏</option>
						<c:forEach items="${games }" var="game">
							<option value="${game.gameId }">${game.gameName}</option>
						</c:forEach>
					</select>
					<div id="gameNameTip"></div>
				</div>
			</div>

			<div class="t_line mt31"
				style="padding-left: 20%;margin-top: 0;padding-top: 31px;">
				<div class="l_list wone lh130">游戏大区：</div>
				<div class="r_list wtwo">
					<select id="gameServer" style="height:30px;width: 253px;">
						<option>请选择服务器</option>
					</select>
					<div id="gameServerTip"></div>
				</div>
			</div>

			<div class="t_line mt31"
				style="padding-left: 20%;margin-top: 0;padding-top: 31px;">
				<div class="l_list wone lh130">角色：</div>
				<div class="r_list wtwo">
					<select id="gameRoles" style="height:30px;width: 253px;">
						<option>请选择角色</option>
					</select>
					<div id="gameRolesTip"></div>
				</div>
			</div>
			<div class="t_line mt31"
				style="padding-left: 20%;margin-top: 0;padding-top: 31px;">
				<div class="l_list wone lh130">待充值的账号：</div>
				<div class="r_list wtwo">
					<div class="input_text">
						<input name="chargeUserAccount" id="chargeUserAccount"
							value="${user.userAcc}" type="text" maxlength="30" />
					</div>
					<div id="chargeUserAccountTip"></div>
				</div>
			</div>

			<div class="t_line" style="padding-left: 20%">
				<div class="l_list wone lh130">确认账号：</div>
				<div class="r_list wtwo">
					<div class="input_text">
						<input name="rechargeUserAccount" id="rechargeUserAccount"
							value="${user.userAcc}" type="text" maxlength="30" />
					</div>
					<div id="rechargeUserAccountTip"></div>
				</div>
			</div>

			<div class="select_rechar" style="margin-left: 25%">
				<strong>请选择充值金额：</strong>
				<ul>
					<li><label for="paymentAmount"><input
							id="paymentAmount" name="paymentAmount" type="radio" value="10"
							checked="checked" onClick="setValue(this.value)" />10元</label></li>
					<li><label for="paymentAmount10"><input
							id="paymentAmount10" name="paymentAmount" type="radio" value="30"
							onClick="setValue(this.value) " />30元</label></li>
					<li><label for="paymentAmount50"><input
							id="paymentAmount50" name="paymentAmount" type="radio" value="50"
							onClick="setValue(this.value) " />50元</label></li>
					<li><label for="paymentAmount100"><input
							id="paymentAmount100" name="paymentAmount" type="radio"
							value="100" onClick="setValue(this.value) " />100元</label></li>
					<li><label for="paymentAmount500"><input
							id="paymentAmount500" name="paymentAmount" type="radio"
							value="500" onClick="setValue(this.value) " />500元</label></li>
					<li><label for="paymentAmount1000"><input
							id="paymentAmount1000" name="paymentAmount" type="radio"
							value="1000" onClick="setValue(this.value) " />1000元</label></li>
					<li><label for="paymentAmount5000"><input
							id="paymentAmount5000" name="paymentAmount" type="radio"
							value="5000" onClick="setValue(this.value) " />5000元</label></li>
					<li class="qt"><label for="paymentAmountOther"><input
							type="radio" id="paymentAmountOther" name="paymentAmount"
							value="0" />其它</label>
						<div class="input_text">
							<input type="text" style="color: rgb(153, 153, 153);"
								id="usersetamount" name="usersetamount" maxlength="5"
								class="sum" />
						</div> <span>元</span>
						<div class="xzyx">
							<div class="onCorrect"
								style="margin: 0px; padding: 0px; background: none repeat scroll 0% 0% transparent;"
								id="usersetamountTip"></div>
						</div></li>


					<li class="zh"><span>折合乐控科技钻石<strong class="orange"
							id="moneytopoints">100</strong>点（注：1元=10钻石）
					</span></li>
				</ul>
			</div>
			<div class="txtCenter mt30">
				<a class="btn_10" id="bankCardBtn" name="bankCardBtn"><span
					class="btn_psd1">下一步</span></a>
			</div>
		</div>
	</div>
	<div id="cnfView">
		<div class="pop_box" id="popCharTips">
			<div class="pop_box_con">
				<h3 class="f18 fgrey" id="confirm_title_step1">
					您确定充值<span class="fred" id="dianjuan_show"></span>点券到账号<span
						class="fred" id="useraccount_tip"></span>吗？
				</h3>
				<h3 class="f18 fgrey" id="confirm_title_step2" style="display:none;">&nbsp;</h3>
				<div class="popcon_item">
					<h4 class="tleft" id="confrim_info_step1">
						请注意：您需要在新打开的网页页面上完成剩余充值操作。<br />充值完成前请不要关闭此窗口。完成充值后，您可以继续点选您希望进行的操作。
					</h4>
					<h4 class="tleft" id="confrim_info_step2" style="display:none;">
						1.在新打开网页上没有充值完成前请不要关闭此窗口。<br />
						2.充值成功后，查询充值记录可能会存在网络延时，如果在5分钟内还没有查询到充值成功记录，可拔打客服电话010-82296999。
					</h4>
					<div class="cen_mbk">
						<a class="btn_10 mr15" id="paymentConfirm_left_step1"><span
							class="btn_psd1">确定</span></a>
						<!-- 第一步提示 -->
						<a class="btn_10 mr15" id="paymentConfirm_right_step1"
							onclick="$.KzShowForm.removeBox();"><span class="btn_psd1">取消</span></a>
						<!-- 第一步提示 -->
						<a class="btn_10 mr15" id="paymentConfirm_left_step2"
							style="display:none;"
							href="http://passport.kongzhong.com:80/v/billing/history/pay/itsp1"><span
							class="btn_psd1">充值完成</span></a>
						<!-- 第二步提示 -->
						<a class="btn_10 mr15" id="paymentConfirm_right_step2"
							style="display:none;"
							href="http://passport.kongzhong.com:80/billing/pay/payment_bank"><span
							class="btn_psd1">继续充值</span></a>
						<!-- 第二步提示 -->
					</div>
				</div>
			</div>
		</div>


	</div>
	<%@ include file="footer.jsp"%>
</body>

<script type="text/javascript">
	var username = $.trim($.KzCookie.g('UDT-KZG'));
	$("#usersetamount").attr("readOnly", true);
	// 	$("#chargeUserAccount").val(username);
	$.formValidator.initConfig({
		errorFocus : false,
		formID : "payment_frm",
		forcevalid : false,
		validatorGroup : "pay_paymemt"
	});
	$("#chargeUserAccount").formValidator({
		validatorGroup : "pay_paymemt",
		onFocus : tips.account.f_cz
	}).regexValidator({
		regExp : "useraccount",
		dataType : "enum",
		onError : tips.account.err_cz,
		onErrorEmpty : tips.account.err_cz_null
	}).ajaxValidator({
		url : "/products/regcheckname",
		dataType : "json",
		async : false,
		data : {
			"name" : function() {
				return $("#chargeUserAccount").val();
			}
		},
		success : function(data) {
			if (data != "-1") {
				return tips.account.err_cz_empty;
			}
			return true;
		},
		onError : tips.account.err_cz_empty
	});
	$("#rechargeUserAccount").formValidator({
		validatorGroup : "pay_paymemt",
		onFocus : tips.account.f_cz_qr
	}).regexValidator({
		regExp : "useraccount",
		dataType : "enum",
		onError : tips.account.err_cz_qr,
		onErrorEmpty : tips.account.err_cz_qr_null
	}).compareValidator({
		desID : "chargeUserAccount",
		operateor : "=",
		onError : tips.account.err_cz_qr
	});
	$.formValidator.initConfig({
		errorFocus : false,
		formID : "payment_bank",
		submitOnce : true,
		forcevalid : false,
		validatorGroup : "paybank_paymemt"
	});

	$("#usersetamount").formValidator({
		validatorGroup : "paybank_paymemt",
		onFocus : "请输入充值金额",
		onCorrect : "null"
	}).functionValidator({
		fun : function() {
			if ($(":radio[name='paymentAmount']:checked").val() == "0") {
				var val = $("#usersetamount").val();
				if (val && val != "") {
					var re = new RegExp("^[1-9]\\d{0,4}$", "ig");

					if (val.match(re)) {
						$("#chargeAmount").val(val);
						var points = $.KzPayUtils.getPoints2(val);
						$("#dianjuan").val(points);
						$("#moneytopoints").html(points);
					} else {
						return "请输入正确的充值金额";
					}
				} else {
					return "未选择充值金额";
				}

			}
			return true;
		}
	});

	$(":radio[name='paymentAmount']").bind("click", function() {
		var val = $(this).val();
		$("#chargeAmount").val(val);
		var points = $.KzPayUtils.getPoints2(val);
		$("#dianjuan").val(points);
		$("#moneytopoints").html(points);
		if (val == "0") {
			$("#usersetamount").attr("readOnly", false);
		} else {
			$("#usersetamountTip").hide();
			$("#usersetamount").attr("readOnly", true);
		}
		$("#usersetamount").val("");
	});
	$.formValidator.initConfig({
		formID : "selectGame",
		validatorGroup : "selectGame",
		onShow:"",
		tipCss:{
			left:10,
			top:-4,
			height:20,
			width:280
		}
	});
	$("#gameName").formValidator({
		validatorGroup : "selectGame"
	});
	$("#gameServer").formValidator({
		validatorGroup : "selectGame"
	});
	$("#gameRoles").formValidator({
		validatorGroup : "selectGame"
	});
	function setValue(value) {
		$("#moneytopoints").text($.KzPayUtils.getPoints2(value));
	}
	$("#bankCardBtn").click(function() {
		if ($("#gameName").val()==-1) {
			$.formValidator.setFailState("gameName", "请选择游戏");
			return;
		}
		if ($("#gameServer").val()==-1) {
			$.formValidator.setFailState("gameServer", "请选择服务器");
			return;
		}
		if ($("#gameRoles").val()==-1) {
			$.formValidator.setFailState("gameRoles", "请选择角色");
			return;
		}
		if (!$.formValidator.isOneValid("chargeUserAccount")) {
			$.formValidator.setFailState("chargeUserAccount", "充值账号输入错误");
			return;
		}
		if (!$.formValidator.isOneValid("rechargeUserAccount")) {
			$.formValidator.setFailState("rechargeUserAccount", "确认账号填写不正确");
			return;
		}
		if (!$.formValidator.isOneValid("usersetamount")) {
			$.formValidator.setFailState("usersetamount", "请输入正确的充值金额");
			return;
		}
		$("#backCardView").hide();
		$("#cnfView").show();
	});
	$("#gameName").change(
			function() {
				$.ajax({
					url : "/products/getServerByGame",
					async : false, //异步：true;同步: false
					cache : false,
					data : {
						"gameId" : $("#gameName").val()
					},
					dataType : "json", //参数有"json","text"
					type : 'POST',
					success : function(msg) {
						$("#gameServer option").remove();
						$("#gameServer").append(
								"<option value='"+"-1"+"'>" + "请选择服务器"
										+ "</option>");
						$.each(msg, function(index, item) {
							$("#gameServer").append(
									"<option value='"+item.serverId+"'>"
											+ item.serverName + "</option>");
						});
					}
				});
				$("#gameNameTip").hide();
			});
	
	$("#gameServer").change(
			function() {
				$.ajax({
					url : "/products/getRolesByServer",
					async : false, //异步：true;同步: false
					cache : false,
					data : {
						"serverId" : $("#gameServer").val()
					},
					dataType : "json", //参数有"json","text"
					type : 'POST',
					success : function(msg) {
						$("#gameRoles option").remove();
						$("#gameRoles").append(
								"<option value='"+"-1"+"'>" + "请选择角色"
										+ "</option>");
						$.each(msg, function(index, item) {
							$("#gameRoles").append(
									"<option value='"+item.roleId+"'>"
											+ item.roleName + "</option>");
						});
						if(msg.length==1){
							$("#gameRoles").val(msg[0].roleId);
							$("#gameRolesTip").hide();
						}
					}
				});
				$("#gameServerTip").hide();
			});
	$("#gameRoles").change(function(){
		$("#gameRolesTip").hide();
	});
</script>
</html>
